<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>05_组件介绍</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        let app = document.getElementById("app")
        /* 
        React允许我们将UI拆分成独立的可复用的代码片段，并对每个片段进行独立的构思，我们将每个独立的片段称之为"组件"

        React里，组件根据功能可以分为两大类：
        1.函数级组件：本质上就是一个函数，将组件的模板结构return出来，语法相对于class组件来说，简单清晰，但是因为其本质是一个函数，导致其无法描述组件的生命周期，一般仅仅作为展示类组件使用。

        2.class级组件:本质上是一个类（ES6）,每一个组件都是类实例化的对象，因为语法是面向对象的语法，所以可以设置生命周期，进行复杂的逻辑编写
        */

        function Welcome(props){
            console.log("props的值是:",props);
            return <div>hello,{props.name}</div>
        }
        //ReactDOM.render(Welcome(),app)
        //ReactDOM.render(<Welcome />,app)

        ReactDOM.render(Welcome({name:'reactDOM'}),app) //name: 'reactDOM'
        ReactDOM.render(<Welcome name="reactDOM" age="20" />,app) //name: 'reactDOM', age: '20'

        /* 
        函数式组件的运行过程：
        1.React支持直接将函数名当作组件名使用
        2.不管使用方式是函数调用还是组件名调用，当React执行到时都会找到对应名字的函数，然后对该函数进行调用
        3.如果是函数调用语法，可以直接向该函数里传入实参，就可以将数据传入到组件内部
        4.如果是组件名的语法，想要向组件内部传值，需要将传递的值以自定义属性的形式书写，自定义属性可以写多个，这些自定义属性会全部赋值给函数的第一个形参
        */
        function Student(props){
            console.log("props的值是:",props);
            return <h3>你好，我叫{props.info.name}，今年{props.info.age}岁了，就读于{props.school}大学，学号为{props.id}，年级为{props.nianji}年级</h3>
        }
        
        ReactDOM.render(Student({info:{name:'黑侠',age:'21'},school:'黑侠',id:20190233,nianji:19}),app);
        let schoolinfo1 = {school:"黑侠",id:'2021610233',nianji:'大一'}
        let schoolinfo2 = {school:"黑侠",id:'2019610122',nianji:'大三'}
        let studentinfo1 = {name:"黑侠",age:'19'}
        let studentinfo2 = {name:"刀锋",age:'21'}
        ReactDOM.render((
            <div>
                {/* <Student name="黑侠" age='22' school='黑侠' id='20190233' nianji='19' /> //组件名调用基础语法 */}
                <Student info={studentinfo1} {...schoolinfo1} />
                <Student info={studentinfo2} {...schoolinfo2} />    
            </div>
        ),app)

        class Welcome1 extends React.Component {
            render() {
                return <div>hello,{this.props.name}</div>
            }
        }
        ReactDOM.render(<Welcome1 {...schoolinfo1} {...studentinfo1} />,app)
        /* 
        class组件的执行过程
        1、当react执行到<Welcome1/>,会去查找有没有同名的函数或者class
        2、当找到名字为Welcome1的class时，通过Welcome1这个class实例化（new）了一个对象
        3、当对象实例化完毕之后，会自动执行render方法，将JSX语法返回
        4、如果此时需要给组件传递参数，还是通过自定义属性，而且这些自定义属性全部会自动赋值给实例化的这个对的props属性，这个props是内置的，不需要声明

        */
    </script>
</body>
</html>